<template>
  <div class="page-container">
    <!--订单基本信息栏-->
    <div class="basicOrderInformation">
      <!--1/4栏-->
      <div class="orderIndex">
        <div class="orderIndexList">
          <span>订单编号：</span>
          <span>{{orderDetail.orderNo}}</span>
        </div>
        <div class="orderIndexList">
          <span>销售商家：</span>
          <span>{{orderDetail.merchantName}}</span>
        </div>
        <div class="orderIndexList">
          <span>订单来源：</span>
          <span>普通</span>
        </div>
      </div>

      <!--2/4栏-->
      <div class="orderIndex">
        <div class="orderIndexList">
          <span>父单号：</span>
          <span>{{orderDetail.parentOrderNo}}</span>
        </div>
        <div class="orderIndexList">
          <span>销售店铺名称：</span>
          <span>{{orderDetail.storeName}}</span>
        </div>
        <div class="orderIndexList">
          <span>配送方式：</span>
          <span>快递物流</span>
        </div>
      </div>

      <!--3/4栏-->
      <div class="orderIndex">
        <div class="orderIndexList">
          <span>订单类型：</span>
          <span>普通</span>
        </div>
        <div class="orderIndexList">
          <span>来源终端：</span>
          <span>H5</span>
        </div>
        <div class="orderIndexList">
          <span>下单时间：</span>
          <span>{{orderDetail.buyTime}}</span>
        </div>
        <div class="orderIndexList">
          <span>&nbsp;</span>
          <span>&nbsp;</span>
        </div>
      </div>

      <!--4/4栏-->
      <div class="orderIndex">
        <div class="orderIndexList">
          <span>订单状态：</span>
          <span v-if="orderDetail.orderStatus =='1'">待支付</span>
          <span v-if="orderDetail.orderStatus =='2'">未发货</span>
          <span v-if="orderDetail.orderStatus =='3'">待发货</span>
          <span v-if="orderDetail.orderStatus =='4'">已发货</span>
          <span v-if="orderDetail.orderStatus =='5'">确认收货</span>
          <span v-if="orderDetail.orderStatus =='6'">待评价</span>
          <span v-if="orderDetail.orderStatus =='7'">已关闭</span>
          <span v-if="orderDetail.orderStatus =='8'">付款处理中</span>
        </div>
        <div class="orderIndexList">
          <span>下单会员账号：</span>
          <span>{{orderDetail.buyerId}}</span>
        </div>
        <div class="orderIndexList">
          <span>收货人地址：</span>
          <span>{{orderDetail.receiverProvinceName}}-{{orderDetail.receiverCityName}}-{{orderDetail.receiverRegionName}} {{orderDetail.receiverAddress}}</span>
        </div>
      </div>
    </div>

    <!--供应商信息-->
    <div class="basicOrderInformation">
      <div class="businessInformation">
        <span>供应商：</span>
        <span>
            <el-select v-model="transferToMerchantId" placeholder="请选择供应商" value-key="id">
              <el-option
                v-for="item in merchantData"
                :key="item.id"
                :label="item.name"
                :value="item">
              </el-option>
            </el-select>
          </span>
      </div>
    </div>

    <!--商品信息-->
    <div style="border:1px solid #ccc;margin-bottom:10px">
      <!--商品信息-->
      <el-table :data="productDetailsData"
                :size="size"
                style="width: 100%"
                align="center"
                header-align="center"
                :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}"
                v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                stripe>
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="goodsImgUrl" label="商品主图" min-width="100">
          <template slot-scope="scope">
            <img :src="scope.row.goodsImgUrl" width="40" height="40"/>
          </template>
        </el-table-column>
        <el-table-column prop="goodsName" label="商品名称" min-width="300"></el-table-column>
        <el-table-column prop="propertyName" label="规格属性" min-width="120"></el-table-column>
        <el-table-column prop="unitName" label="订购单位"></el-table-column>
        <el-table-column prop="goodsNum" label="商品数量"></el-table-column>
        <el-table-column prop="goodsNum" label="待转交货单数量" min-width="120"></el-table-column>
        <el-table-column label="转单价格" min-width="120">
          <template slot-scope="scope">
            <el-input type="number" v-model="scope.row.waitTransferDeliverNum" @input="deliverPrice" style="width: 80px"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="actualPayTotalAmount" label="实付总金额"></el-table-column>
        <el-table-column prop="saleUnitPrice" label="销售单价"></el-table-column>
        <el-table-column prop="buyUnitPrice" label="购买单价"></el-table-column>
        <el-table-column prop="discountUnitPrice" label="优惠单价"></el-table-column>
        <el-table-column prop="expressUnitFee" label="物流平摊单价" min-width="120"></el-table-column>
      </el-table>

      <!--商品信息分页-->
      <el-row style="margin:10px 0">
        <span style="color:#4e738d;float:left;">总商品价格: {{productPrice}} &nbsp;&nbsp; 总商品数量: {{productNum}}</span>
        <el-pagination
          layout="total, prev, pager, next, jumper,sizes"
          @current-change="handleCurrentChangeProductInfo"
          :current-page="orderGoodsPage.start"
          :page-size="orderGoodsPage.limit"
          :total="orderGoodsTotal"
          style="float:right;"
          :page-sizes="[10, 20, 30, 40]"
          @size-change="handleSizeChangeProductInfo"
        ></el-pagination>
      </el-row>
    </div>

    <el-button size="medium" type="primary" @click="handleDeliverySubmit()">提交</el-button>

  </div>
</template>

<script>
  import CyTable from '@/views/Core/ProductTable'
  import KtButton from '@/views/Core/KtButton'

  export default {
    components: {
      KtButton,
      CyTable,
    },

    data() {
      return {
        size: 'small',
        loading: true,
        orderDetail: {},                                                             // 订单详情
        orderNo: null,
        productDetailsData: [],                                                      // 商品明细列表
        orderGoodsPage: {
          'orderNo': '',
          'limit': 10,
          'start': 1
        },                                          // 商品明细
        orderGoodsTotal: 0,

        merchantData: [],
        transferToMerchantId: null,                                                  // 手动转交货单
        productPrice: 0,                                                             // 交货单总价格
        productNum: 0                                                                // 交货单总数量
      }
    },

    mounted() {
      this.orderNo = this.$route.params.orderNo
      this.getOrderDetail()
      this.queryOrderGoodsQuery()
      this.getMerchantList()
    },

    methods: {
      // 订单详情
      getOrderDetail() {
        let this_ = this
        this_.utils.request.getOrderDetail({orderNo: this_.orderNo}, function (res) {
          if (res.code == '0000') {
            this_.orderDetail = res.data
          }
        })
      },

      // 订单商品明细分页
      queryOrderGoodsQuery() {
        let this_ = this
        this_.orderGoodsPage.orderNo = this_.orderNo
        this_.utils.request.queryOrderGoodsQuery(this_.orderGoodsPage, function (res) {
          if (res.code == '0000') {
            this_.loading = false
            this_.productDetailsData = res.data.rows
            this_.orderGoodsTotal = Number(res.data.total)
            this_.deliverPrice()
          }
        })
      },

      // 商品明细分页条数
      handleSizeChangeProductInfo(val) {
        this.orderGoodsPage.start = 1
        this.orderGoodsPage.limit = val
        this.queryOrderGoodsQuery()
      },

      // 商品明细分页当前页
      handleCurrentChangeProductInfo(val) {
        this.orderGoodsPage.start = val
        this.queryOrderGoodsQuery()
      },

      // 转交货商家查询
      getMerchantList() {
        let filters = {start: 1, limit: 1000, status: 2}
        let this_ = this
        this.utils.request.queryMerchantList(filters, function (res) {
          if (res.code == '0000') {
            this_.merchantData = res.data.rows
          }
        })
      },

      // 转单总计价格
      deliverPrice() {
        let deliveryPrice = 0
        let deliveryNum = 0
        for (let i = 0; i < this.productDetailsData.length; i++) {
          deliveryPrice += Number(this.productDetailsData[i].waitTransferDeliverNum)
          deliveryNum += Number(this.productDetailsData[i].goodsNum)
        }
        this.productPrice = deliveryPrice
        this.productNum = deliveryNum
      },

      handleDeliverySubmit() {
        let params = {
          transferToMerchantId: this.transferToMerchantId.id,
          transferToMerchantName: this.transferToMerchantId.name,
          productNum: this.productNum,
          productPrice: this.productPrice,
          orderNo: this.$route.params.orderNo
        }
        let this_ = this
        if (params.transferToMerchantId == null || params.transferToMerchantId <= 0) {
          this_.$message({message: '请选择供应商', type: 'warning'})
          return
        }
        if (params.productPrice == null || params.productPrice <= 0) {
          this_.$message({message: '请填写转单价格', type: 'warning'})
          return
        }
        this.utils.request.insertOrderManualDelivery(params, function (res) {
          if (res.code === '0000') {
            this_.$message({message: '操作成功', type: 'success'})
          } else {
            this_.$message({message: '操作失败,' + res.msg, type: 'error'})
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .basicOrderInformation {
    margin-bottom: 20px;
    border: 1px solid #ccc;
    background-color: #fff;
    padding-bottom: 10px;
    font-size: 16px;
    overflow: hidden;

    .orderIndex {
      float: left
    }

    .orderIndexList {
      text-align: left;
      margin: 10px 0 0 0;
      padding-left: 90px
    }

    .businessInformation {
      text-align: left;
      margin: 10px 0 0 0;
      padding-left: 90px
    }
  }
</style>
